<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin:0;">
    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="FullModel();" />
        <input type="button" value="取消" onclick="FailModel();" />
        <input type="button" value="反选" onclick="ReverseModel();" />
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>192.168.1.1</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>192.168.1.2</td>
                    <td>8080</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>192.168.1.3</td>
                    <td>8090</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束-->
    <!-- 弹出框结束-->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="确定" />
            <input type="button" value="取消" onclick="HideModel();" />
        </p>
    </div>
    <!--弹出框结束-->
    <script>
        function ShowModel(){
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function HideModel(){
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }
        function FullModel(){
            var tags = document.getElementById('tb');
            var tr_list = tags.children;
            for(var i=0;i<tr_list.length;i++){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;
            }
        }
        function FailModel(){
            var tags = document.getElementById('tb');
            var tr_list = tags.children;
            for(var i=0;i<tr_list.length;i++){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }
        function ReverseModel(){
            var tags = document.getElementById('tb');
            var tr_list = tags.children;
            for(var i=0;i<tr_list.length;i++){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if (checkbox.checked){
                    checkbox.checked = false;
                }else{
                    checkbox.checked = true;
                }
            }
        }
    </script>
</body>
</html>